<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>密码管理工具</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="keywords"
          content="收藏家，URL管理工具，多端同步，便携管理">
    <meta name="description"
          content="收藏家秉承“承担、学习、诚信、创新、服务”核心价值观，专注于一流收藏服务，构建人人都用收藏的社会，致力于让收藏成就卓越人生，助力千千万万有收藏梦想的人们早日实现美好梦想。收藏家前期将致力于简化个人和企业的的收藏管理开发，感谢您，您的帮助是对我们最大的支持和动力！">
  <link rel="alternate icon" type="image/png" href="__ASSETS__/i/favicon.png">
  <link rel="stylesheet" href="__ASSETS__/css/amazeui.min.css"/>
</head>
<style>
  .circle_bg{
    width: 50pt;
    height: 50pt;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgb(221,221,221) inset;
    margin: auto;
    line-height: 50pt; /*设置line-height与父级元素的height相等*/
    text-align: center;
  }
  .circle_local{
    margin-top: 25pt;
    margin-right: 30pt;
    /*margin: auto;*/
  }
  .circle_text_center{
    vertical-align: middle;
  }
  .yu-right-content{
    position: relative;
    margin-right: 2%;
    background-color: deepskyblue;
    width: 100%;
    min-height: 60pt;
    margin-top: -3.9%;
    child-align: right;
  }
  .yu-btn-01{
    position: absolute;
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*height: 50px;*/
    /*width: 80px;*/
    /*margin: auto;*/
    /*margin-right: 0;*/
    margin-right: 10%;
  }
  .yu-left-sta{
    margin-left: 2.5%;
  }
  .yu-title{
    margin-top: 3%;
  }
  .yu-hr{
    background-color: rgb(221,221,221);
    width: 121pt;
    height: 1px;
    margin-top: 6%;
  }

</style>

<style media="screen">
  @keyframes fadeIn {
    0%    {opacity: 0}
    100%  {opacity: 1}
  }
  @-webkit-keyframes fadeIn {
    0%    {opacity: 0}
    100%  {opacity: 1}
  }
  @-moz-keyframes fadeIn {
    0%    {opacity: 0}
    100%  {opacity: 1}
  }
  @-o-keyframes fadeIn {
    0%    {opacity: 0}
    100%  {opacity: 1}
  }
  @-ms-keyframes fadeIn {
    0%    {opacity: 0}
    100%  {opacity: 1}
  }
  @keyframes fadeOut {
    0%    {opacity: 1}
    100%  {opacity: 0}
  }
  @-webkit-keyframes fadeOut {
    0%    {opacity: 1}
    100%  {opacity: 0}
  }
  @-moz-keyframes fadeOut {
    0%    {opacity: 1}
    100%  {opacity: 0}
  }
  @-o-keyframes fadeOut {
    0%    {opacity: 1}
    100%  {opacity: 0}
  }
  @-ms-keyframes fadeOut {
    0%    {opacity: 1}
    100%  {opacity: 0}
  }
  #toast{
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding:10px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 9999;
  }
  .hide{
    display: none;
  }
  .fadeOut{
    animation: fadeOut .5s;
  }
  .fadeIn{
    animation:fadeIn .5s;
  }
</style>
<body>



<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
    <div data-am-sticky="{animation: 'slide-top'}">
      <button type="button" class="am-btn am-btn-success am-btn-block" data-am-offcanvas="{target: '#doc-oc-demo1'}">点我（新增）</button>
    </div>

    <br>
    <div id="content">
      <section class="am-panel am-panel-default">
        <div class="am-panel-bd">
          <div class="am-g">
            <div class="am-u-sm-8">
              <h3 class="am-panel-title yu-title yu-left-sta">锦绣钱程oa系统【5】</h3>
              <hr class="yu-hr yu-left-sta">
              <p class="yu-left-sta">http://oa.goldann.com.cn</p>
              <p class="yu-left-sta">账户名：GA001526</p>
              <p class="yu-left-sta">密码：!12*****b</p>
            </div>
            <div class="am-u-sm-4">
              <p type="button" class="am-fr "></p><br/><br/>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-fr " data-am-offcanvas="{target: '#doc-oc-demo3'}">移除这条</button><br/><br/>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-fr " data-am-offcanvas="{target: '#doc-oc-demo3'}">编辑修改</button><br/><br/>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-fr " data-am-offcanvas="{target: '#doc-oc-demo3'}">查看密码</button>
            </div>
          </div>

        </div>
      </section>

      <section class="am-panel am-panel-default">
        <div class="am-panel-bd">
          <div class="am-g">
            <div class="am-u-sm-8">
              <h3 class="am-panel-title yu-title yu-left-sta">锦绣钱程oa系统【5】</h3>
              <hr class="yu-hr yu-left-sta">
              <p class="yu-left-sta">http://oa.goldann.com.cn</p>
              <p class="yu-left-sta">账户名：GA001526</p>
              <p class="yu-left-sta">密码：!12*****b</p>
            </div>
            <div class="am-u-sm-4">
              <p type="button" class="am-fr "></p><br/><br/>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-fr " >移除这条</button><br/><br/>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-fr ">编辑修改</button><br/><br/>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-fr ">查看密码</button>
            </div>
          </div>

        </div>
      </section>

    </div>





    <!-- 侧边栏内容 -->
    <div id="doc-oc-demo1" class="am-offcanvas" style="background-color: transparent">
      <div class="am-offcanvas-bar" style="background-color: white">
        <!--<div class="am-offcanvas-content" style="background-color: white">-->
          <form class="am-form">
            <fieldset>
              <legend id="action_title">新增一条密码记录</legend>

              <div class="am-form-group">
                <label for="doc-ipt-title-1">标题</label>
                <input type="text" class="" id="doc-ipt-title-1" placeholder="（重要）输入标题">
              </div>

              <div class="am-form-group">
                <label for="doc-ipt-url-1">访问地址</label>
                <input type="url" class="" id="doc-ipt-url-1" placeholder="（选填）访问地址">
              </div>

              <div class="am-form-group">
                <label for="doc-ipt-account-1">登录账户</label>
                <input type="text" class="" id="doc-ipt-account-1" placeholder="（重要）输入登录账户">
              </div>

              <div class="am-form-group">
                <label for="doc-ipt-pwd-1">密码</label>
                <input type="password" class="" id="doc-ipt-pwd-1" placeholder="（重要）密码会自动加密">
              </div>

              <div class="am-form-group">
                <label for="doc-ipt-sort-1">排序</label>
                <input type="url" class="" id="doc-ipt-sort-1" placeholder="（选填）排序">
              </div>

              <div class="am-form-group">
                <label for="doc-ta-1">备注</label>
                <textarea class="" rows="5" id="doc-ta-1" placeholder="（选填）备注信息"></textarea>
              </div>
            </fieldset>
          </form>

        <p><button type="submit" class="am-btn am-btn-default  am-btn-block yu-add-submit">提交</button></p>
        <!--</div>-->
      </div>
    </div>


    <!-- 侧边栏内容 -->
    <div id="doc-oc-demo3" class="am-offcanvas"  style="background-color: transparent">
      <div class="am-offcanvas-bar am-offcanvas-bar-flip" style="background-color: white">
        <div class="am-offcanvas-content" style="background-color: white" >
          <h3>权限安全校验</h3>
          <hr class="yu-hr">
          <div>
            <span>待验证的邮箱：</span><br><span id="my_email">2726***********com</span><br><br>
            <button type="button" class="am-btn am-btn-default am-btn-sm am-btn-block yu-send-email-code">发送邮箱验证码</button>
            <br><span id="my_email_tips" style="color: red;font-size: small"></span><br>
            <div class="am-form-group">
              <label for="doc-ipt-code-1">邮箱验证码</label>
              <input type="text" class="" id="doc-ipt-code-1" placeholder="（重要）输入邮箱验证码">
              <br><br>
              <button type="button" class="am-btn am-btn-default am-btn-sm am-btn-block yu-check-email-code">验证</button>
              <br><br>
              <span id="result_show" style="font-size: small;color: green"></span>
            </div>
          </div>

        </div>
      </div>
    </div>



      {include file="public/footer" /}
  </div>
</div>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__ASSETS__/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="__ASSETS__/js/amazeui.min.js"></script>

<script src="__ASSETS__/js/jquery.cookie.min.js"></script>
<script src="__ASSETS__/js/common.js"></script>
<script src="__ASSETS__/js/pas.js"></script>

</body>
</html>
